<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="keywords" content="关键词">
        <meta name="description" content="描述">
        <meta name="author" content="潭州教育-阿飞老师">
        <style>
            body{font-family: "Microsoft YaHei",serif;}
            body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
            ol,ul,li{margin:0;padding:0;list-style:none;}
            img{border:none;}

            #wrap{
                position: absolute;
                z-index: 1;
                left: 200px;
                top: 200px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background:radial-gradient(#fff 0%,#f00 100%);
            }
            #shadow{
                position:absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
            #shadow p{
                position: absolute;
                width: 35px;
                height: 35px;
                background-color: pink;
                transform-origin:center center;
                transform: scale(1);
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div id="wrap"></div>
        <div id="shadow"></div>
        
        <script>

            (function(){
                //获取小球以及初始left，top
                let oWrap = document.getElementById("wrap");
                let oShadow = document.getElementById("shadow");
                let sL = oWrap.offsetLeft;
                let sT = oWrap.offsetTop;

                //运动step
                let stepX = 7,
                    stepY = 10;

                //获取浏览器可视区的宽高,以及更新事件
                let maxLeft,maxTop;
                window.onresize = (function s(){
                    maxLeft = window.innerWidth - oWrap.offsetWidth;
                    maxTop = window.innerHeight - oWrap.offsetHeight;
                    return s;
                })();


                !function m(){
                    sL += stepX;
                    sT += stepY;

                    //水平撞墙，方向取反
                    if( sL >= maxLeft ){
                        sL = maxLeft;
                        stepX = -stepX;
                    }
                    if(sL <= 0){
                        sL = 0;
                        stepX = -stepX;
                    }

                    //垂直撞墙，方向取反
                    if( sT >= maxTop ){
                        sT = maxTop;
                        stepY = -stepY;
                    }
                    if( sT <= 0 ){
                        sT = 0;
                        stepY = -stepY;
                    }

                    oWrap.style.left = sL+'px';
                    oWrap.style.top = sT+'px';

                    createShadow(sL,sT);

                    requestAnimationFrame(m);
                }();

                //生成拖尾
                function createShadow(left,top){
                    let oP = document.createElement("p");
                    oP.style.left = left+7+'px';
                    oP.style.top = top+7+'px';
                    oP.style.transition = "transform .8s,opacity .8s";
                    //oP.style.backgroundColor = randomColor();
                    setTimeout(()=>{
                        oP.style.transform = "scale(0.3)";
                        oP.style.opacity = "0";
                    });
                    setTimeout(()=>{oShadow.removeChild(oP)},800)
                    oShadow.appendChild(oP);
                }
                /*//随机颜色
                function randomColor(){
                    let r = Math.floor(Math.random()*256),
                        g = Math.floor(Math.random()*256),
                        b = Math.floor(Math.random()*256);
                    return `rgb(${r},${g},${b})`;
                }*/


            })();


        </script>
    </body>
</html>














